<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#008ff9"
            text-color="#fff"
            active-text-color="#fff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                v-if="subItem.subs"
                                :index="subItem.index"
                                :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                    v-for="(threeItem,i) in subItem.subs"
                                    :key="i"
                                    :index="threeItem.index"
                                >{{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.index"
                                :key="subItem.index"
                            >{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
            items: [
                {
                    icon: 'el-icon-map-location',
                    index: 'dashboard',
                    title: '监管一张图'
                },
               {
                    icon: 'el-icon-lx-calendar',
                    index: '42',
                    title: '政府主体责任落实情况',
                    subs: [
                         {
                            index: 'waterloss',
                            title: '水土流失消长变化'
                        }, {
                            index: 'implementationoffunds',
                            title: '水保工作经费落实情况管理'
                        },
                    ]
               },{
                    icon: 'el-icon-lx-calendar',
                    index: '10',
                    title: '生产建设项目监督管理',
                    subs: [
                         {
                            index: 'programSummarize',
                            title: '项目综合信息'
                        }, {
                            index: 'planCheck',
                            title: '方案抽查'
                        },{
                            index: 'compensation',
                            title: '补偿费征缴情况'
                        }, {
                            index: 'dailySupervise',
                            title: '日常监督管理'
                        },{
                            index: 'acceptManage',
                            title: '验收管理'
                        },{
                            index: 'illegalItems',
                            title: '违法违规项目查处',
                            subs: [
                                {
                                    index: 'illegalItemsSubmitted',
                                    title: '两单类型（重点关注/黑名单）'
                                },{
                                    index: 'statistics',
                                    title: '违法违规项目统计'
                                }
                            ]
                        },{
                            index: 'illegalItemsWarning',
                            title: '预警管理'
                        },{
                            index: 'illegalItemsRectify',
                            title: '整改管理',
                            subs: [
                                {
                                    index: 'illegalItemsRectifyRecord',
                                    title: '整改记录'
                                },{
                                    index: 'illegalItemsRectifyStatistics',
                                    title: '整改统计'
                                }
                            ]
                        }
                    ]
               },
                {
                    icon: 'el-icon-s-data',
                    index: '371',
                    title: '水土保持重点工程管理',
                    subs: [
                        {
                           index: 'keepProgramBaseInfo',
                           title: '基本信息'  
                        },
                        {
                           index: 'keepProgramProcess',
                           title: '重点工程过程管理'  
                        },
                        {
                           index: 'keepProgramChart',
                           title: '问题汇总分析图表'  
                        },{
                            index: 'keepWarning',
                            title: '预警管理'
                        },{
                            index: 'keepRectify',
                            title: '整改管理',
                            subs: [
                                {
                                    index: 'keepRectifyRecord',
                                    title: '整改记录'
                                },{
                                    index: 'keepRectifyStatistics',
                                    title: '整改统计'
                                }
                            ]
                        }
                    ]
                } , 
                {
                    icon: 'el-icon-s-data',
                    index: '38',
                    title: '水土流失治理任务完成情况',
                    subs: [
                        {
                           index: 'reduceCover',
                           title: '面上治理任务完成情况'  
                        },{
                           index: 'reduceImportant',
                           title: '重点工程水土流失治理任务完成情况'  
                        },{
                            index: 'reduceMap',
                            title: '水土流失治理图斑'
                        }
                    ]
                } , 
               {
                    icon: 'el-icon-s-data',
                    index: '31',
                    title: '水保监测和信息化管理',
                    subs: [
                        {
                            index: 'monitorProgram',
                            title: '工程项目信息录入情况'
                        },
                       
                       {
                            index: 'monitorSupervise',
                            title: '开展水保信息化监管工作'
                        },
                        {
                            index: 'gongchengmanyujing',
                            title: '水土流失动态监测',
                            subs: [
                                {
                                    index: 'monitorReduce',
                                    title: '配合开展水土流失动态监测和水土保持公报工作'
                                }
                            ]
                        },
                        {
                            index: 'monitorWarning',
                            title: '预警管理'
                        },
                        {
                            index: 'monitorRectify',
                            title: '整改管理',
                            subs: [
                                {
                                    index: 'monitorRectifyRecord',
                                    title: '整改记录'
                                },{
                                    index: 'monitorRectifyStatistics',
                                    title: '整改统计'
                                }
                            ]
                        },
                        
                        {
                            index: 'monitorPoint',
                            title: '通报扣分',
                            subs: [
                               {
                                index: 'monitorPoint',
                                title: '扣分规则'
                               },
                               {
                                   index: 'monitorBrief',
                                   title: '通报列表'
                               }, 
                            ]
                        }
                    ]
                },
                //  {
                //     icon: 'el-icon-s-grid',
                //     index: '135',
                //     title: '主体责任管理',
                //     subs: [
                //         {
                //             index: 'zerenmanshuitu',
                //             title: '水土流失管理'
                //         },
                       
                //         {
                //             index: 'zerenmanfee',
                //             title: '工作经费管理'
                //         }
                //     ]
                // },
                // {
                //     icon: 'el-icon-lx-calendar',
                //     index: '315',
                //     title: '主体责任管理',
                //     subs: [
                //         {
                //             index: 'jiancemangongbao',
                //             title: '公报管理'
                //         },
                       
                //         {
                //             index: 'jiancemanxinxi',
                //             title: '信息化管理'
                //         }
                //     ]
                // },
                 {
                    icon: 'el-icon-s-ticket',
                    index: '3135',
                    title: '考核评分管理',
                    subs: [
                        {
                            index: 'kaoheman',
                            title: '考核评分'
                        },
                       
                        {
                            index: 'kaohemanrule',
                            title: '评分规则'
                        }
                    ]
                },
                 {
                    icon: 'el-icon-lx-calendar',
                    index: 'publicity',
                    title: '宣传教育情况',
                    // subs: [
                    //     {
                    //         index: 'xuanchuanmannews',
                    //         title: '新闻公告'
                    //     },
                       
                    //     {
                    //         index: 'xuanchuanmanzhengce',
                    //         title: '政策'
                    //     },
                    //      {
                    //         index: 'xuanchuanmanzhanshi',
                    //         title: '实际样例展示'
                    //     },
                    // ]
                },
                  {
                    icon: 'el-icon-s-operation',
                    index: '131335',
                    title: '统计分析',
                     subs: [
                        {
                            index: 'tongjiman',
                            title: '统计分析'
                        }
                    ]
                   
                },
               {
                    icon: 'el-icon-setting',
                    index: '3',
                    title: '系统管理',
                    subs: [
                        {
                            index: 'systemmanuser',
                            title: '用户管理'
                        },
                       
                        {
                            index: 'systemmanrole',
                            title: '角色管理'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
</style>
